<template>
    <div style="height: 400px;overflow: auto">
        <el-row>
            <el-dialog title="部门树" :visible="dialogVisible" center width="50%" :before-close="handleClose">
                <el-row style="height: 500px;">
                    <el-col :span="16">
                        <el-tree :data="deptTree" :default-expand-all="isExpand" show-checkbox :check-strictly="true"
                            node-key="deptId" :props="{ label: 'deptName' }" @check-change="handleClick" ref="tree"
                            v-if="deptTree.length > 0">
                        </el-tree>
                    </el-col>

                    <el-col :span="8">
                        <el-button size="mini" @click="unfoldTree">展开</el-button>
                        <el-button size="mini" @click="closeTree">关闭</el-button>
                        <el-button size="mini" @click="clearTree">清空</el-button>
                    </el-col>
                </el-row>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </span>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>

import { queryDeptTree } from '@/api/common/common'
export default {
    data() {
        return {
            dialogVisible: false,
            deptTree: [],
            dept: {},
            isExpand: true
        };
    },
    methods: {
        //显示弹窗
        show() {
            this.dialogVisible = true;
            // 获取树节点数据
            queryDeptTree({}).then(res => {
                this.deptTree = res.data
            });
        },
        handleClose() {
            this.dialogVisible = false;
        },

        //部门节点点击事件
        handleClick(data, checked, node) {
            if (checked) {
                this.$refs.tree.setCheckedKeys([data.deptId]);
                this.dept = data;
            }
        },
        // 展开
        unfoldTree() {
            this.isExpand = true;
            this.DynamicScaling();
        },
        // 确定
        submitForm() {
            this.dialogVisible = false;
            // this.$emit("aaa", this.dept)
            this.$parent.setDept(this.dept)
        },
        // 关闭
        closeTree() {
            this.isExpand = false;
            this.DynamicScaling();
        },
        // 清空
        clearTree() {
            this.$refs.tree.setCheckedKeys([]);
            this.dept={};
        },
        DynamicScaling() {
            for (let j = 0; j < this.$refs.tree.store._getAllNodes().length; j++) {
                this.$refs.tree.store._getAllNodes()[j].expanded = this.isExpand;
            }
        },
    }
}
</script>

<style></style>